<template>
	<!-- cdfs-备注信息列表 -->
	<div class="fillcontain">

		<el-dialog title="批注信息" :visible.sync="drawer" :width="'70%'" :before-close="handleClose" center>
			<div class="contain">
				<el-row>
					<el-col :span="24" class="pb15 pt5">
						<el-button type="danger" plain @click="showAdd = true">新增批注</el-button>
					</el-col>
				</el-row>
				<div v-if="showAdd">
					<el-row>
						<el-input clearable type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="comments">
						</el-input>
					</el-row>
					<el-row>
						<el-col :span="12" class="pb15 pt15 pr10 text_right">
							<el-button type="danger" plain @click="showAdd = false">取消</el-button>
						</el-col>
						<el-col :span="12" class="pb15 pt15 pr10 text_left">
							<el-button type="danger" class="Defaultbutton" @click="addComments()">保存</el-button>
						</el-col>
					</el-row>
				</div>

				<!-- 查询结果列表 -->
				<div class="table_container">
					<el-table ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark" highlight-current-row
					 header-cell-class-name="table-header-class" style="width:100%">
						<el-table-column property="index" label="序号" align='center' min-width="120" show-overflow-tooltip>
							<template scope="scope">
								<span>{{scope.$index + 1}}</span>
							</template>
						</el-table-column>
						<el-table-column property="routeName" label="质检状态" align='center' min-width="120" show-overflow-tooltip>
						</el-table-column>
						<el-table-column property="userId" label="处理人员" align='center' min-width="120" show-overflow-tooltip></el-table-column>
						<el-table-column property="time" label="处理时间" align='center' min-width="160" show-overflow-tooltip></el-table-column>
						<el-table-column property="remark" label="批注信息" align='center' min-width="120" show-overflow-tooltip></el-table-column>
					</el-table>
					<el-row>
						<el-col :span="24">
							<div class="pagination">
								<el-pagination background v-if='paginations.total > 0' :page-sizes="paginations.pageSizes" :page-size="paginations.pageSize"
								 :layout="paginations.layout" :total="paginations.total" :current-page='paginations.pageIndex' @current-change='handleCurrentChange'
								 @size-change='handleSizeChange'>
								</el-pagination>
							</div>
						</el-col>
					</el-row>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import constant from '@/utils/constant';
	import TaskConstants, {
		call
	} from "@/api/taskManager/common"
	export default {
		name: "comments-list",
		data() {
			return {
				// 查询条件
				tableData: [],
				loading: false,
				comments: "",
				showAdd: false,
				pickerOptions1: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					}
				},
				qualityTypes: TaskConstants.qualityTypes,
				//需要给分页组件传的信息
				paginations: {
					total: 0, // 总数
					pageIndex: 1, // 当前位于哪页
					pageSize: 10, // 1页显示多少条
					pageSizes: [5, 10, 15, 20], //每页显示多少条
					layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
				},
			}
		},
		created() {},
		mounted() {

		},
		props: {
			drawer: {
				type: Boolean,
				default: false
			},
			taskNo: {
				type: String
			},
			routeid: {
				type: String
			}
		},
		methods: {
			handleClose(done) {
				this.$emit('close', this.drawer);
			},
			// 每页多少条切换
			handleSizeChange(pageSize) {
				this.paginations.pageSize = pageSize;
				this.getList(this.taskNo);
			},
			getRouteName(value) {
				for (var key in this.qualityTypes) {
					if (this.qualityTypes[key]["value"] && this.qualityTypes[key]["value"] == value) {
						value = this.qualityTypes[key]["name"]
						break;
					}
				}
				return value;
			},
			getList(taskNO) {
				this.tableData = [];
				this.$store.dispatch('loading/CHANGE_LOADING', true);
				let param = {
					'taskno': taskNO,
					'pageNumber': this.paginations.pageSize,
					'pageSize': this.paginations.pageIndex
				}
				call(TaskConstants.apis.qualityCommentsList, param, "post").then(res => {
					this.$store.dispatch('loading/CHANGE_LOADING', false)
					if (res.resultCode == constant.SUCCESS && res.data) {
						this.paginations.total = res.data.total;
						this.tableData = res.data.list;
						this.tableData.forEach(item =>{
							item['routeName'] = this.getRouteName(item.routeid)
						})
					}
				}).catch(err => {
					this.$store.dispatch('loading/CHANGE_LOADING', false);
				})
			},
			addComments() {
				let param = {
					taskno: this.taskNo,
					comments: this.comments,
					routeid: this.routeid
				}
				call(TaskConstants.apis.qualityCommentsAdd, param, "post").then(res => {
					if (res.resultCode == constant.SUCCESS) {
						this.$message.success(res.resultMsg)
						this.getList(this.taskNo);
						this.comments = "";
						this.showAdd = false;
					}
				})
			},
			// 上下分页
			handleCurrentChange(page) {
				this.paginations.pageIndex = page;
				this.getList(this.taskNo);
			},
		},
		watch: {
			taskNo: function(newValue) {
				if (newValue != undefined && newValue != '') {
					this.paginations.pageIndex = 1;
					this.paginations.pageSize = 10;
					this.getList(newValue);
				}

			},
		},
		computed: {
			...mapGetters(['tags']),

		},
		activated() {
			if (this.reload) {
				this.$store.dispatch('loading/CHNAGE_RELOAD', false)
				Object.assign(this.$data, this.$options.data());
			}
		}
	}
</script>

<style lang="less" scoped>
	.fillcontain {
		padding-bottom: 0;
	}

	.contain {
		background: #fff;
		padding: 10px;
		margin-bottom: 20px;
	}

	.pagination {
		padding: 10px 20px;
		text-align: right;
	}

	.operationIcon {
		// padding: 12px;
		border: 1px solid #e5e5e5;
		border-radius: 50%;
		width: 22px;
		height: 22px;
		display: inline-block;
		cursor: pointer;
		box-shadow: 0 0 3px #f9f9f9;

		.svg-icon {
			font-size: 14px;
			fill: #68a3fc;
		}
	}

	.search_container {
		padding: 20px 20px 0 20px;
		border-top: 1px solid #e1e1e1;
	}
</style>
